<template>
	<div class="recommend">
		<div class="title">{{title}}</div>
		<div class="list">
			<router-link :to="`/moviepage/${item.movieId}`" class="item" v-for="item in movielist" :key="item.movieId">
				<div class="bg">
					<img :src="item.poster">
					<div class="mv-sc">
						观众评分&nbsp;&nbsp;
						<span class="sc">{{item.score}}</span>
					</div>
				</div>
				<h5 class="name ellipsis">{{item.name}}</h5>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			movielist: Array,
			title: String,
		},
	}
</script>

<style lang="less" scoped>
	.recommend {
		padding: 12px 15px;
		margin-bottom: 10px;
		background-color: #fff;

		.title {
			font-size: 14px;
			color: #333;
			margin: 0 0 12px;
		}

		.list {
			width: 100%;
			overflow: scroll;
			white-space: nowrap;

			.item {
				display: inline-block;
				width: 85px;
				overflow: hidden;
				margin-right: 10px;

				.bg {
					position: relative;
					width: 85px;
					height: 115px;
					margin-bottom: 6px;

					img {
						width: 100%;
						height: 115px;
					}

					&::after {
						content: "";
						// display: inline-block;
						width: 100%;
						height: 35px;
						position: absolute;
						left: 0;
						bottom: 0;
						background-image: linear-gradient(-180deg, rgba(77, 77, 77, 0), #000);
					}

					.mv-sc {
						position: absolute;
						left: 4px;
						bottom: 2px;
						color: #faaf00;
						font-size: 12px;
						font-weight: 600;
						z-index: 2;
					}
				}

				.name {
					font-size: 14px;
					color: #222;
					margin: 0 0 3px;
					font-weight: 700;
				}

				.ellipsis {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}

		}
	}

	.recommend::-webkit-scrollbar {
		width: 0;
	}
</style>
